﻿
@{
    ViewBag.Title = "Home";
    Layout = "~/Views/MusciShopMasterPage.cshtml";
}
<link rel="stylesheet" href="~/Content/HomeCss.css">
<div class="HomePageDiv" id="HomeApp">
    <div class="Carousel">
        <img src="../image/banner/1.jpg" />
    </div>
    <div class="StarChaserMust">
        <span style="margin-left: 8px;letter-spacing:2px;font-size: 22px;">追星必备</span><br />
        <span style="color: #FE5196;">▐</span><span style="margin-left: 2px;color: rgba(104,104,104,0.7);font-size: 15px;letter-spacing:1px;">nuptialtuberdes</span>
        <div class="StarChaserMustImages" style="display: flex;">


            <div class="StarChaserMustLi" v-for="index in StarChaserMustData">
                <div class="StarChaserMustImageList" align="center">
                    <div class="StarChaserMustImage" :style="'background-image: url(../image/'+index.ImagePath">
                        <div>
                            <div class="StarChaserMustImage01"></div>
                            <span class="StarChaserMustImage02">{{index.DisPlayText_Ch}}</span>
                            <span class="StarChaserMustImage03">{{index.DisPlayText_En}}</span>
                            <div class="StarChaserMustImage04"></div>
                        </div>
                    </div>
                    <span>{{index.DisPlayText_Title}}</span>
                </div>
            </div>

            <div class="StarChaserMustLastImage" style="background-image: url(../image/special.jpg);"></div>
        </div>
    </div>
    <div class="TopList">
        <span style="margin-left: 10px;color: #FE5196;border: #FE5196 2px solid;"></span><span style="margin-left: 8px;letter-spacing:2px;font-size: 22px;">TOP榜</span><br />
        <div class="TopListImages">

            <div class="TopListLi" v-for="(item,index) in TopListData">
                <div class="TopListLiImage" :style="'background-image: url(../image/'+item.ImagePath">
                    <div class="TopListLiImage01">
                        <span>{{index + 1}}</span>
                    </div>
                    <span>销量:{{item.Quantity}}</span>
                </div>
                <span>{{item.Singer}}</span>
            </div>

        </div>
    </div>
    <div class="ProductLaunch">
        <span style="margin-left: 8px;letter-spacing:2px;font-size: 22px;">新品首发</span><br />
        <span style="color: #FE5196;">▐</span><span style="margin-left: 2px;color: rgba(104,104,104,0.7);font-size: 15px;letter-spacing:1px;">
            New
            Starter
        </span>
        <div class="ProductLaunchImages">

            <div class="ProductLaunchLi" v-for="item in ProductLaunchData">
                <div class="ProductLaunchImage" style="background-image: url(../image/im1.jpg);"></div>
                <div class="ProductLaunchText">
                    <span style="text-align: center;">[ 现货包邮 ] 加一联创1more bear 万魔熊 头</span>
                    <span style="padding: 20px 0px;margin-left: 15px;color: #FE5196;">¥50</span>
                    <div class="ProductLaunchTextSpan03" id="no">
                        <span>0</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/vue.js"></script>
<script>
		$(function() {
			var myv = new Vue({
				el: "#HomeApp",
				data: {
					StarChaserMustData: [],
					TopListData: [],
					ProductLaunchData: []
				}
			});
			(function() {
                $.get("../DataJson/StarChaserMustData.json", {}, function(data) {
					myv.$data.StarChaserMustData = data.StarChaserMustData;
				})
			})();
			(function() {
                $.get("../DataJson/TopListData.json", {}, function(data) {
					myv.$data.TopListData = data.TopList;
				})
			})();
			(function() {
                $.get("../DataJson/ProductLaunchData.json", {}, function(data) {
					myv.$data.ProductLaunchData = data.ProductLaunch;
				})
			})();

			$(".ProductLaunchImages").on("click",".ProductLaunchTextSpan03",function(){
				var a = parseInt($(this).children("span").text());
				if($(this).attr("id") == "no"){

					$(this).children("span").text(a+1);
					$(this).attr("id","yes");
					$(this).css("backgroundPosition","-15px 85%")
				}else{
					$(this).children("span").text(a-1);
					$(this).attr("id","no");
					$(this).css("backgroundPosition","5px 85%")
				}
			})
		})
</script>

